<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GO机网管理后台</title>
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
	<link href="../../css/bootstrap.min.css" rel="stylesheet">
	<link href="css/nifty.min.css" rel="stylesheet">
	<link href="../../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
	<link href="../../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<link href="../../css/user_defined.css" rel="stylesheet">
	<link href="../../plugins/pace/pace.min.css" rel="stylesheet">
	<script src="../../plugins/pace/pace.min.js?2016/8/5"></script>
	<script src="../../js/jquery-2.2.1.min.js"></script>

</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body id="main">
<div id="container" class="effect mainnav-lg">
	@@include('public/header.html')
	<div class="boxed">
		<div id="content-container">
			
			<!--Page Title-->
			<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
			<div id="page-title">
				<h1 class="page-header text-overflow">首页banner管理</h1>
			</div>
			<!--End page title-->
			<style>
				.row{
					padding:32px;
				}
				table {
					color: #999;
					margin:10px auto 0;
					width:100%;
				}
				td img{
					width:100%;
					height:150px;
				}
				td,th{
					padding: 10px;
					border:1px solid #bbbbbb;
				}
				th{
					text-align: center;
					background: #e6e6e6;
					font-size:25px;
				}
				.banner_form div{
					display:flex;
					font-size:18px;
					align-items: center;
					margin:10px 0;
					justify-content: center;
				}
				.banner_form button:first-child{
					margin-right:45px;
				}
				.banner_form div input{
					margin-left:15px;
					flex:1;
				}
				.banner_image{position: relative;box-sizing: border-box;}
				.banner_image input{
					position:absolute;
					width:95%;
					height:94%;
					top:0;
					opacity: 0;
					z-index: 1000;
					cursor:pointer;
				}
			</style>
			<div class="row mar-top pad-top pad-all">
				<button class="btn btn-primary" v-on:click="addBanner();">添加banner图片</button>
				<table>
					<tr>
						<th width="400">banner图片</th>
						<th>操作</th>
					</tr>
					
					<tr v-for="b in banners">
						<td class="banner_image">
							<img :src="b.imgurl?b.imgurl:'image/image-placehoder.png'" alt="">
							<input v-on:change="uploadImage(b, $event)" type="file" accept="image/png,image/jpg,image/jpeg">
						</td>
						<td class="banner_form">
							<div>
								<span>图片链接</span>
								<input type="text" v-model="b.gourl" class="form-control">
							</div>
							<div>
								<span>文字描述</span>
								<input type="text" v-model="b.desc" class="form-control">
							</div>
							<div>
								<button class="btn btn-primary" :disabled="!(b.imgurl && b.desc)" v-on:click="saveBanner();">保存修改</button>
								<button class="btn btn-danger" v-on:click="deleteBanner(b);">删除该图片</button>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<nav id="mainnav-container">
			@@include('public/left_menu.html')
		</nav>
	</div>
</div>
@@include('public/footer.html')
<script>
	var vue = new Vue({
		el: '#main',
		data: {
			banners:[],
			banner:{}
		},
		methods: {
			addBanner:function(){
				vue.banners.push({});
			},
			saveBanner:function(){
				var index = layer.load(1, {shade: [0.5,'#555']});
				$.post(apiRecycle+"index.php?m=Home&c=Index&a=set_index_banner", {
					banner_json:JSON.stringify(vue.banners)
				}, function(res){
					layer.close(index);
					location.reload();
				}, "json");
			},
			deleteBanner:function(b){
				var index = vue.banners.indexOf(b);
				vue.banners.splice(index, 1);
				vue.saveBanner();
			},
			uploadImage:function(banner, e){
				vue.banner = banner;
				var input = e.target;
				
				var formData  = new FormData();
				formData.append("file", input.files[0]);
				
				var index = layer.load(1, {shade: [0.5,'#555']});
				$.ajax({
					url : "http://image.txiaoyuan.cn/index.php/Home/Image/uploadImage?platform=goji",
					data : formData,
					type : 'POST',
					processData: false,
					contentType: false,
					success : function(data){
						data = JSON.parse(data);
						banner.imgurl = data.data.img_origin;
						input.parentNode.querySelector("img").src = banner.imgurl;
						layer.close(index);
					},
					complete:function(){
						layer.close(index);
					},
					error:function(x){
						alert(JSON.stringify(x));
						layer.close(index);
					}
				});
			}
		},
		ready: function () {
			var thiz = this;
			$.get(apiRecycle+"index.php?m=Home&c=Index&a=get_index_banner", {}, function(res){
				thiz.banners = res.data?res.data:[];
			}, "json")
		}
	});
</script>
</body>
</html>
